<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户仪表盘</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f9;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      h2 {
        text-align: center;
        color: #333;
      }
      .user-info {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f9f9f9;
      }
      .user-info p {
        margin: 10px 0;
      }
      .logout-btn {
        display: inline-block;
        padding: 10px 15px;
        background-color: #f44336;
        color: white;
        text-decoration: none;
        border-radius: 4px;
      }
      .logout-btn:hover {
        background-color: #d32f2f;
      }
      .message {
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 4px;
      }
      .success {
        background-color: #d4edda;
        color: #155724;
      }
      .error {
        background-color: #f8d7da;
        color: #721c24;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>欢迎，{{ user.username }}！</h2>

      {% with messages = get_flashed_messages(with_categories=true) %} {% if
      messages %} {% for category, message in messages %}
      <div class="message {{ category }}">{{ message }}</div>
      {% endfor %} {% endif %} {% endwith %}

      <div class="user-info">
        <p><strong>用户名:</strong> {{ user.username }}</p>
        <p><strong>用户ID:</strong> {{ user.id }}</p>
      </div>

      <a href="#" id="logout-link" class="logout-btn">退出登录</a>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const logoutLink = document.getElementById("logout-link");

        logoutLink.addEventListener("click", function (e) {
          e.preventDefault();

          fetch("/logout", {
            method: "GET",
            headers: {
              "X-Requested-With": "XMLHttpRequest",
            },
          })
            .then((response) => response.json())
            .then((result) => {
              if (result.success) {
                alert(result.message);
                window.location.href = result.redirect;
              } else {
                alert("退出登录失败: " + result.message);
              }
            })
            .catch((error) => {
              alert("退出登录请求失败");
            });
        });
      });
    </script>
  </body>
</html>
